<template>
    <div class="goodsDetail-container">
        <div class="item" @click="bigimg">
            <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
            >
                <van-swipe-item v-for="(item, index) in thumb" :key="index">
                    <img :src="item.src" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="item">
            <div class="price">
                <span class="sell_price">&yen; {{ goodsInfo.sell_price }}</span>
                <span class="market_price"
                    >&yen; {{ goodsInfo.market_price }}</span
                >
            </div>
            <div class="title van-multi-ellipsis--l2">
                {{ goodsInfo.title }}
            </div>
        </div>
        <div class="item">
            <van-divider>产品介绍</van-divider>
            <div class="content" v-html="goodsInfo.content"></div>
        </div>
        <van-goods-action>
            <van-goods-action-icon
                icon="chat-o"
                text="客服"
                @click="servicehotline"
                dot
            />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="2" />
            <van-goods-action-button
                type="warning"
                text="加入购物车"
                @click="jionshopcar"
            />
            <van-goods-action-button
                type="warning"
                text="立即购买"
                @click="buyit"
            />
        </van-goods-action>
        <!-- 商品sku -->
        <van-sku
            v-model="show"
            :sku="sku"
            :goods="goods"
            :goods-id="goodsInfo.id"
            :hide-stock="sku.hide_stock"
            :reset-stepper-on-hide="true"
        >
            <template #sku-messages>
                <div class="item">
                    <van-divider>产品详情</van-divider>
                    <div>商品货号：{{ goodsInfo.goods_no }}</div>
                    <div>库存：{{ goodsInfo.stock_quantity }}件</div>
                    <div>
                        上架时间：{{
                            goodsInfo.add_time
                                | dateFormat("YYYY-MM-DD HH:mm:ss")
                        }}
                    </div>
                </div>
            </template>
        </van-sku>
    </div>
</template>

<script>
import { fetchGoodsImages, fetchGoodsInfo } from "@/api/index.js";
import { ImagePreview } from "vant";
export default {
    props: ["id"],
    data() {
        return {
            show: false,
            thumb: [],
            goodsInfo: {},
            sku: {
                tree: [],
                price: "2195.00", //
                stock_num: 60, // 库存
                hide_stock: true, //隐藏剩余库存
            },
            goods: {
                picture: "",
            },
        };
    },
    methods: {
        servicehotline() {
            this.$dialog
                .confirm({
                    title: "拨打电话",
                    message: "确认要联系客服吗",
                })
                .then(() => {
                    window.location.href = "tel://" + 18475100765;
                })
                .catch(() => {
                    // alert('您取消了联系客服')
                });
        },
        async _fetchGoodsImages() {
            let { message } = await fetchGoodsImages(this.id);
            this.thumb = message;
            this.goods.picture = message[0].src;
        },
        async _fetchGoodsInfo() {
            let { message } = await fetchGoodsInfo(this.id);
            let reg = /\width=['"]\w+['"]\s+/i;
            message.content = message.content.replace(reg, "");
            this.goodsInfo = message;
        },
        bigimg() {
            let imgs = this.thumb.map((item) => item.src);
            ImagePreview({
                images: imgs,
                startPosition: 1,
            });
        },
        jionshopcar() {
            this.show = true;
        },
        buyit() {
            this.$toast("立即购买");
        },
    },
    created() {
        this._fetchGoodsImages();
        this._fetchGoodsInfo();
    },
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/var.scss";
.goodsDetail-container {
    height: 100vh;
    background: $bgColor;
    padding: 4px;
    .item {
        border-radius: 6px;
        margin-bottom: 8px;
        background: #fff;
        padding: 8px;
        .my-swipe {
            .van-swipe-item {
                height: 240px;
                text-align: center;

                img {
                    height: 100%;
                }
            }
        }

        .price {
            .sell_price {
                color: red;
                font-size: 20px;
                margin-right: 20px;
            }
            .market_price {
                color: #ccc;
                font-size: 14px;
                text-decoration: line-through;
            }
        }

        .title {
            color: black;
            font-weight: 500;
        }

        .content {
            color: black;
            ::v-deep img {
                width: 100%;
            }
        }
    }
    .van-goods-action {
        min-width: 320px;
        max-width: 750px;
        margin: 0 auto;
    }
}
.van-sku-container {
    min-width: 320px;
    max-width: 750px;
    left: 50%;
    transform: translateX(-50%);
}
</style>
